<script setup lang="ts">
import { ref } from 'vue'
import ChartComponent from './components/ChartComponent.vue'

const chartData = ref([
  {
    name: 'Mon',
    data: Array.from({ length: 7 }, () => Math.floor(Math.random() * 200))
  },
  {
    name: 'Tue',
    data: Array.from({ length: 7 }, () => Math.floor(Math.random() * 200))
  },
  {
    name: 'Wed',
    data: Array.from({ length: 7 }, () => Math.floor(Math.random() * 200))
  },
  {
    name: 'Thu',
    data: Array.from({ length: 7 }, () => Math.floor(Math.random() * 200))
  },
  {
    name: 'Fri',
    data: Array.from({ length: 7 }, () => Math.floor(Math.random() * 200))
  },
  {
    name: 'Sat',
    data: Array.from({ length: 7 }, () => Math.floor(Math.random() * 200))
  },
  {
    name: 'Sun',
    data: Array.from({ length: 7 }, () => Math.floor(Math.random() * 200))
  }
])

const chartColors = ref(['#5470C6', '#91CC75', '#FAC858', '#EE6666', '#73C0DE'])
const chartBarWidth = ref(10)
</script>

<template>
  <header class="grid grid-cols-3 w-full justify-center items-center p-4 shadow-md mb-8">
    <div class="justify-self-start flex items-center space-x-2 text-indigo-900">
      <h1>WayTale</h1>
    </div>
    <div class="w-full flex space-x-4 justify-center"></div>
  </header>

  <main class="px-8">
    <ChartComponent :data="chartData" :colors="chartColors" :barWidth="chartBarWidth" />
  </main>
</template>
